<template>
 <van-nav-bar
  title="小米说明"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
  <div class="explain">
    <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E8%AF%B4%E6%98%8E%E4%B9%A6%E8%AF%A6%E6%83%85/u1204.jpg" alt="">
  </div>
  <main>
    <h3>米家智能电暖器</h3>
    <p>2200W强劲功率，即开即热，智能恒温，多种智能操纵模式。</p>
    <i>查看商品详情 ></i> 
    <div class="box" ><span>查看在线说明书</span>
    </div>
    <div class="icon">
      <div><van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" class="van-icon"/><span>找客服</span></div>
      <p><van-icon name="share-o" class="van-icon"/><span>分享</span></p>
    </div>

  </main>
</template>

<script >
import { NavBar,Icon } from 'vant';
export default {
  name: 'explain',
  setup(){
    const onClickLeft = () => history.back();
   
    return{
      onClickLeft
    }
}


}
</script>

<style lang="less" scoped >
.explain{
  width: 100%;
  height: 200px;
 img{
  width: 100%;
  height: 100%;
 }
}
main{
  width: 100%;
  height:360px ;
  background: #eee;
  position: relative;
  h3{
    padding-top: 20px;
    margin-left: 10px;
  }
  p{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
  }
  i{
    font-size: 14px;
    color: #ff5722;
    margin-left: 10px;
  }
  .box{
    position: absolute;
    width: 335px;
    height: 45px;
    background: #ff5722;
    color: #fff;
    left: 20px;
    bottom: 100px;
    border-radius: 20px;
    span{
     margin-left: 100px;
      line-height: 45px;
    }
  }
  .icon{
    width: 335px;
    position: absolute;
    left: 20px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div{
      width: 148px;
      height: 44px;
      border: 2px solid #000;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-icon{
        font-size: 30px;
      }
    }
    p{
      width: 148px;
      height: 44px;
      border: 2px solid #000;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-icon{
        font-size: 30px;
      }
    }


  }
}
</style>
